<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图书管理系统</title>
<!--引入css文件夹里面的bootstrap.css-->
<link rel="stylesheet" href="static/bootstrap/css/bootstrap.css">
<!--引入js文件夹里面的jquery-->
<script src="static/bootstrap/js/jquery.min.js"></script>
<script src="static/bootstrap/js/bootstrap.bundle.js"></script>
<!--引入js文件夹里面的bootstrap.js-->
<script src="static/bootstrap/js/bootstrap.js"></script>

<style>
.main {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background-image: url("static/image/bg.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

.login-container {
	max-width: 400px;
	margin: 100px auto;
	padding: 20px;
	background-color: #ffffff;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.login-container h2 {
	margin-bottom: 30px;
	font-size: 24px;
	text-align: center;
}

.login-container .form-group {
	margin-bottom: 15px;
}

.login-container .form-control {
	border: 1px solid #ced4da;
	border-radius: 5px;
	padding: 10px;
	font-size: 16px;
}
</style>
</head>
<body>
	<%
		// 获取项目上下文
		String baseUrl = request.getContextPath();
	%>

	<div class="main">
		<div class="login-container">
			<h2>登录</h2>
			
				<div class="form-group">
					<input type="text" class="form-control" name="username" id="username" placeholder="请输入帐号">
				</div>
				<div class="form-group">

					<input type="password" class="form-control" name="password" id="password" placeholder="请输入密码">
				</div>
				<button type="submit" class="btn btn-primary btn-block" id="login">登录</button>
		
		</div>
		
		<!-- 登录消息提示框 -->
		<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">
		    <div id="loginToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
		      <div class="toast-body text-center">
		        	
		      </div>
		    </div>
		</div>
		
	</div>
	
	<script type="text/javascript">
		$(document).ready(function(){
			var baseUrl = '<%=baseUrl%>';
			$('#login').click(function(){
				// 获取输入框的帐号和密码
				var username = $('#username').val();
				var password = $('#password').val();
				// ajax发送请求
				$.ajax({
					type : "POST",
					url : baseUrl + "/UserServlet.do",
					data : {
						username : username,
						password : password
					},
					success : function(data) {
						console.log(data);
						var code = data.code;
						if(code == 1){
							$('#loginToast>.toast-body').text(data.message);
							$('#loginToast').toast('show');
							// TODO 跳转至书籍页面
							// 跳转至书籍页面
							setTimeout(function() {
								window.location.href=baseUrl+"/BookListServlet.do";
							}, 1000);
						}else{
							$('#loginToast>.toast-body').text(data.message);
							$('#loginToast').toast('show');
						}
					},
					error : function(data) {
						$('#loginToast>.toast-body').text("系统错误");
						$('#loginToast').toast('show');
					}
				});
			});
		});
		
	</script>
</body>
</html>